<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-10-19 12:46
 * @version 1.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 * @description todo
 */
 -->
<template>
  <div class="x-render-right">
    <el-form label-suffix=":">
      <template v-if="currentItem.type !== 'img'">
        <el-form-item label="内容">
          <el-input type="textarea" :rows="28" :value="currentItem.text" @input="handleChange"
                    style="width: 320px" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="字体大小">
          <el-input-number :value="currentItem.fontSize" :min="10" :max="200" @change="handleFontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="行间距">
          <el-input-number :value="currentItem.lineHeight" :min="10" :max="200"
                           @change="handleLineHeight"></el-input-number>
        </el-form-item>
      </template>
      <el-button v-else type="primary" @click="handleFileClick">更换图片</el-button>
    </el-form>

    <input v-if="fileShow"
           style="display: none;"
           name="rightFileChange"
           type="file"
           accept="image/jpeg,image/png"
           ref="rightFileChange"
           @change="handleFileChange"></input>
  </div>
</template>

<script>
export default {
  name: "RightPane",
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          title: {},
          content: []
        }
      }
    },
    active: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      fileShow: false
    }
  },
  computed: {
    currentItem: {
      get() {
        const {active, data} = this
        if (active === -1) {
          return data.title || {}
        }
        return (data.content || [])[active] || {}
      }
    }
  },
  methods: {
    handleLineHeight(val) {
      const {active, data, currentItem} = this
      const tmp = {...data}
      if (active === -1) {
        tmp.title = {
          id: currentItem.id || Date.now(),
          text: currentItem.text,
          fontSize: currentItem.fontSize,
          lineHeight: val
        }
        this.$emit('update:data', tmp)
        return
      }
      const content = tmp.content || []
      content[active] = {
        id: currentItem.id || Date.now(),
        type: currentItem.type,
        text: currentItem.text,
        fontSize: currentItem.fontSize,
        lineHeight: val
      }
      tmp.content = content
      this.$emit('update:data', tmp)
    },
    handleFontSize(val) {
      const {active, data, currentItem} = this
      const tmp = {...data}
      if (active === -1) {
        tmp.title = {
          id: currentItem.id || Date.now(),
          text: currentItem.text,
          lineHeight: currentItem.lineHeight,
          fontSize: val
        }
        this.$emit('update:data', tmp)
        return
      }
      const content = tmp.content || []
      content[active] = {
        id: currentItem.id || Date.now(),
        type: currentItem.type,
        text: currentItem.text,
        lineHeight: currentItem.lineHeight,
        fontSize: val
      }
      tmp.content = content
      this.$emit('update:data', tmp)
    },
    handleChange(val) {
      const {active, data, currentItem} = this
      const tmp = {...data}
      if (active === -1) {
        tmp.title = {
          id: currentItem.id || Date.now(),
          text: val,
          fontSize: currentItem.fontSize,
          lineHeight: currentItem.lineHeight,
        }
        this.$emit('update:data', tmp)
        return
      }
      const content = tmp.content || []
      if (currentItem.type === 'img') {
        content[active] = {
          id: currentItem.id || Date.now(),
          type: currentItem.type,
          src: val
        }
      } else {
        content[active] = {
          id: currentItem.id || Date.now(),
          type: currentItem.type,
          text: val,
          fontSize: currentItem.fontSize,
          lineHeight: currentItem.lineHeight
        }
      }

      tmp.content = content
      this.$emit('update:data', tmp)
    },
    handleFileClick() {
      this.fileShow = true
      const index = setInterval(() => {
        if (this.$refs.rightFileChange) {
          this.$refs.rightFileChange.click()
          clearInterval(index)
        }
      }, 200)
    },
    handleFileChange(event) {
      this.fileShow = false
      const file = event.target.files[0]
      if (file) {
        const that = this
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function (event) {
          const result = event.target.result
          if (result) {
            that.handleChange(result)
          } else {
            this.$message.error('未选择图片')
          }
        }
      } else {
        this.$message.error('未选择图片')
      }
    },
  }
}
</script>

<style scoped lang="css">
.x-render-right {
  width: 400px;
  padding: 8px;
  display: flex;
  flex-flow: column nowrap;
}
</style>
